<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<style>
  #app > div {
    padding: 18px;
    margin-top: 12px;
    background: #f9f9f9;
    border: 1px solid #ddd;
  }
  #app > div:hover{
    border-color: #40bb7d;
    background: #f7fffb;
    box-shadow: 0 10px 20px #f3f5f3;
    cursor: pointer;
  }
  #app .vnode3 {
    color: #1b9164;
  }
</style>
<body>
  <div id="app">
  </div>
</body>
<script>
  const { createApp, h, render, ref } = Vue

  const app = createApp({
    setup() {
      const msg = ref(' 你好~!')
      const count = ref(0)
      const class1 = 'vnode3'

      const openModal = () => {
        window.alert('我是vnode4的弹窗!')
      }
      
      /** h 函数的使用
       * 参数1, vnode(对象) | tag(原生html标签)
       * 参数2, Object(属性或事件) | null
       * 参数3, children(子节点) | slot(插槽) | slots(多个插槽), 字符串,对象或数组
       * 
       * 注意: 
       * h('div', '我是vnode1') 
       * h('div', ['我是vnode1', '我是vnode2'])
       * 这样表示属性没传, 参数2 => 表示第3个参数：子节点
       * 
       * h('xxx', 'xxx')返回一个vnode, 
       * () => h('xxx', 'xxx') 这返回的是一个组件, 这种形式只能在template里使用
      */

      const vnode1 = h('div', `我是vnode1, ${msg.value}`)
      const vnode2 = h('div', { style: { color: 'red' } }, '我是vnode2, 红色!')
      const vnode3 = h('div', { class: [class1, { box: true }] }, '我是vnode3, 类名[vnode3, box]!')
      const vnode4 = h('div', { onClick: () => { openModal() } }, '我是vnode4, 点我弹窗!')
      const vnode5 = h('div', ['我是vnode5的文本节点1, ', '文本节点2!'])
      const vnode6 = h('div', ['我是vnode6', h('span', { style: {color: '#999'} }, '的子元素span')])

      // 返回一个组件的形式
      // () => h('xxx')
      // () => [h('xxx1'), h('xxx2')]
      return () => [ 
        vnode1,
        vnode2,
        vnode3,
        vnode4,
        vnode5,
        vnode6,
      ]
    }
  })

  app.mount('#app')
</script>
</html>
